<template>
  <div class="app-container">
    <!-- 查询条件 -->
    <el-form size="small" :inline="true" :model="queryParam" class="demo-form-inline">
      <el-form-item label="菜单名称">
        <el-input v-model="queryParam.menuName" placeholder="菜单名称" />
      </el-form-item>

      <el-form-item label="菜单状态">
        <el-select v-model="queryParam.status" clearable placeholder="菜单状态">
          <el-option v-for="item in dicts.sys_normal_disable" :key="item.dictValue" :label="item.dictLabel"
            :value="item.dictValue" />
        </el-select>
      </el-form-item>

      <el-form-item label="显示状态">
        <el-select v-model="queryParam.status" clearable placeholder="显示状态">
          <el-option v-for="item in dicts.sys_show_hide" :key="item.dictValue" :label="item.dictLabel"
            :value="item.dictValue" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="btnSearch">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 工具栏 -->

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" v-hasPerm="['system:menu:add']" size="mini"
          @click="handleAdd()">新增根目录</el-button>
      </el-col>

      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" v-hasPerm="['system:menu:update']"
          :disabled="single" @click="handleUpdate()">修改</el-button>
      </el-col>

      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" v-hasPerm="['system:menu:remove']"
          :disabled="multiple">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" @click="handlerExport()"
          v-hasPerm="['system:menu:export']" size="mini">导出
        </el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="tableData.rows" row-key="menuId" :default-expand-all="isExpandAll"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
      <el-table-column prop="icon" label="图标" align="center" width="100">
        <template slot-scope="scope">
          <svg-icon :icon-class="scope.row.icon" />
        </template>
      </el-table-column>
      <el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
      <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
       <el-table-column prop="path" label="路由地址" :show-overflow-tooltip="true" width="160"></el-table-column>
      <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="status" label="显示状态" width="80">
        <template slot-scope="scope">
          <DictTag :dataArray="dicts.sys_normal_disable" :value="scope.row.status"></DictTag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime"></el-table-column>
      <el-table-column label="操作" align="left" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPerm="['system:menu:edit']">修改</el-button>
          <el-button size="mini" v-if="scope.row.level!==2" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)"
            v-hasPerm="['system:menu:add']">添加下级</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPerm="['system:menu:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>



    <!-- 添加或修改菜单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body :close-on-click-modal="false"
      :before-close="cancelForm">

      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="上级菜单" prop="parentId">
              {{form.parentName}}
            </el-form-item>
          </el-col>
         <!-- <el-col :span="24">
            <el-form-item label="菜单类型" prop="menuType">
              <el-radio-group v-model="form.menuType" disabled >
                <el-radio label="M">目录</el-radio>
                <el-radio label="C">菜单</el-radio>
                <el-radio label="F">按钮</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col> -->
          <el-col :span="24" v-if="form.menuType != 'F'">
            <el-form-item label="菜单图标" prop="icon">
              <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">
                <IconSelect ref="iconSelect" @selected="selected" />
                <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
                  <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon"
                    style="height: 32px;width: 16px;" />
                  <i v-else slot="prefix" class="el-icon-search el-input__icon" />
                </el-input>
              </el-popover>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单名称" prop="menuName">
              <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示排序" prop="orderNum">
              <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.menuType != 'F'">
            <el-form-item prop="isFrame">
              <span slot="label">
                <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                是否外链
              </span>
              <el-radio-group v-model="form.isFrame">
                <el-radio :label="0">是</el-radio>
                <el-radio :label="1">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.menuType != 'F'">
            <el-form-item prop="path">
              <span slot="label">
                <el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                路由地址
              </span>
              <el-input v-model="form.path" placeholder="请输入路由地址" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.menuType == 'C'">
            <el-form-item prop="component">
              <span slot="label">
                <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                组件路径
              </span>
              <el-input v-model="form.component" placeholder="请输入组件路径" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.menuType != 'M'">
            <el-form-item prop="perms">
              <el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100" />
              <span slot="label">
                <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                权限字符
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.menuType == 'C'">
            <el-form-item prop="query">
              <el-input v-model="form.query" placeholder="请输入路由参数" maxlength="255" />
              <span slot="label">
                <el-tooltip content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`' placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                路由参数
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.menuType == 'C'">
            <el-form-item prop="isCache">
              <span slot="label">
                <el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                是否缓存
              </span>
              <el-radio-group v-model="form.isCache">
                <el-radio :label="0">缓存</el-radio>
                <el-radio :label="1">不缓存</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.menuType != 'F'">
            <el-form-item prop="visible">
              <span slot="label">
                <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                显示状态
              </span>
              <el-radio-group v-model="form.visible">
                <el-radio v-for="dict in dicts.sys_show_hide" :key="dict.dictValue" :label="dict.dictValue">{{dict.dictLabel}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.menuType != 'F'">
            <el-form-item prop="status">
              <span slot="label">
                <el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                菜单状态
              </span>
              <el-radio-group v-model="form.status">
                <el-radio v-for="dict in dicts.sys_normal_disable" :key="dict.dictValue" :label="dict.dictValue">
                  {{dict.dictLabel}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
       <el-button type="primary" @click="submitForm">确 定</el-button>
       <el-button @click="cancelForm">取 消</el-button>
      </div>
    </el-dialog>



  </div>
</template>

<script>
  import { dataListApi , addApi, findByIdApi, editApi} from '@/api/menu.js'
  import PageMinix from '@/mixin/PageMixin.js'
  import AddOrEditMixin from '@/mixin/AddOrEditMixin.js'
  import DictDataMinix from '@/mixin/DictDataMinix.js'
  //引用自定义图标组件
  import IconSelect from '@/components/IconSelect/index.vue'

  export default {
    components: {
      IconSelect
    },
    mixins: [DictDataMinix, PageMinix, AddOrEditMixin],
    // 加载sys_dict_data数据的值
    dicts: ['sys_normal_disable', 'sys_show_hide'],
    data() {
      return {
        fetchDataApi: dataListApi,
        addApi: addApi,
        findByIdApi, findByIdApi,
        editApi: editApi,
        primaryKey: 'menuId',
        //设定表格类型为树型表格
        tableType: 'tree',
        // 表单校验
        rules: {
          menuName: [
            { required: true, message: "菜单名称不能为空", trigger: "blur" }
          ],
          orderNum: [
            { required: true, message: "菜单顺序不能为空", trigger: "blur" }
          ],
          path: [
            { required: true, message: "路由地址不能为空", trigger: "blur" }
          ]
        }
      }
    },
    methods: {
      initFormValue() {
        this.form = {        
        }
      },

      // excel导出
      handlerExport() {
        //this.download('/api/brand/export/easy', { ...this.queryParam}, `品牌列表_${new Date().getTime()}.xlsx`)
      },
      // IconSelected自定义回调函数
      selected(name) {
        // this.form.icon = name
        this.$set(this.form, 'icon', name)
      },
      // 重写方法
      handleAdd(row){
        //有值，它不是根目录
        //<el-radio label="M">目录</el-radio>
        // <el-radio label="C">菜单</el-radio>
        // <el-radio label="F">按钮</el-radio>
        if(row){
          if(row.menuType==='M'){
            this.form.menuType ='C'
            this.title='添加菜单'
          }else{
             this.form.menuType ='F'
             this.title='添加按钮'
          }
          this.form.parentId = row.menuId
          this.form.parentName=  row.menuName
        }else{
          this.form.menuType ='M'
          this.title='添加目录'
          this.form.parentId = 0
          this.form.parentName= '顶级目录'
        }

        this.form.orderNum = 0
        this.form.status = '0'
        this.form.visible= '0'
        this.form.isCache =1
        this.form.isFrame = 1

        this.open =true
      }
    },
    created() {
      this.initFormValue()
    }
  }
</script>

</script>

<style>
</style>
